<template>
  <div class="case-studies">
    <img src="https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/4ad37d48-98c2-4d97-be62-613af33ad6cf.jpg" alt="应用案例" title="应用案例" style="width: 100%;"/>
    <h1 class="title">应用案例</h1>
    <div class="gallery">
      <div class="case-study" v-for="(study, index) in paginatedCaseStudies" :key="index">
        <div class="image-container" @click="goToEnterprise(study)">
          <img :src="study.image" :alt="study.description" class="fixed-size-image">
        </div>
        <p>{{ study.description }}</p>
      </div>
    </div>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span v-for="page in totalPages" :key="page" @click="goToPage(page)"
            :class="{ active: page === currentPage }">{{ page }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CaseStudies',
  data() {
    return {
      caseStudies: [
        {
          image: 'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/88ab2953-13ca-4aeb-bb0f-4c80a100bfb0.jpg',
          description: '重庆 水电站生态流量监测',
          id: 1,
        },
        {
          image: 'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/943ad276-1f7f-48c1-8718-f445e8997b09.jpg',
          description: '贵州 地质灾害预警',
          id: 2,
        },
        {
          image: 'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/4df74652-b4b2-434c-aca4-5cb288023446.jpg',
          description: '青海 农业水价改革',
          id: 3,
        },
        {
          image: 'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/414d289e-eb1f-43e4-bcec-e2de7f53ba55.jpg',
          description: '云南 生态流量监测',
          id: 4,
        },
        {
          image: 'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/d27fd9b7-9a92-4907-bf91-194ab8f1009d.jpg',
          description: '西藏 水利山洪灾害预警',
          id: 5,
        },
        {
          image: 'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/53497cfd-f6aa-4fec-b9ff-e0b40fe4c81b.jpg',
          description: '重庆 海绵城市径流在线监测',
          id: 6,
        },
        {
          image: 'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/2d7c1880-1966-4c6c-a58e-bd83929e6033.jpg',
          description: '河北、云南 水库安全监测',
          id: 7,
        }
      ],
      currentPage: 1,
      itemsPerPage: 6
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.caseStudies.length / this.itemsPerPage);
    },
    paginatedCaseStudies() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.caseStudies.slice(start, end);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    goToPage(page) {
      this.currentPage = page;
    },
    goToEnterprise(study){
      this.$router.push('/applicationCaseDetailed');
    }
  }
}
</script>

<style scoped>
.case-studies {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f8f8;
  font-family: Arial, sans-serif;
}

.title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 每列最小宽度 300px */
  gap: 20px;
}

.case-study {
  flex: 1 1 calc(33.33% - 20px); /* 每行显示 3 个，间距为 20px */
  text-align: center;
  margin-bottom: 20px;
}

.image-container {
  width: 100%; /* 容器宽度 */
  height: 200px; /* 固定高度 */
  overflow: hidden; /* 隐藏超出部分 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.fixed-size-image {
  width: 100%; /* 图片宽度填满容器 */
  height: 100%; /* 图片高度填满容器 */
  object-fit: cover; /* 图片按比例缩放，覆盖整个容器 */
  display: block; /* 移除图片下方的空白 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.image-container:hover .fixed-size-image {
  transform: scale(1.1); /* 鼠标悬停时放大图片 */
}

.case-study p {
  margin-top: 10px;
  font-size: 1.2rem;
  color: #666;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 10px;
  padding: 5px 10px;
  background-color: black;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.pagination button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.pagination span {
  margin: 0 5px;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #007BFF;
  border-radius: 5px;
}

.pagination .active {
  background-color: black;
  color: white;
}
</style>